<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MultiUpload Demo</title>
<link href="${base }/javascripts/ajaxfileupload/ajaxfileupload.css" type="text/css" rel="stylesheet" />
<link href="multiupload.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base }/javascripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="multiupload.js"></script>
<script type="text/javascript" src="${base }/javascripts/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#imgUpload").submit(function(data) {
		alert(data.msg);
		callback("sdfas");
		return false;
	});
});
function ajaxFileUpload()
{
	$("#loading")
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxComplete(function(){
		$(this).hide();
	});

	$.ajaxFileUpload
	(
		{
			url:'${base}/admin/article/upload',
			secureuri:false,
			fileElementId:'fileToUpload',
			dataType: 'json',
			data:{id: 123213},
			success: function (data, status)
			{
				alert(data.msg);
				callback(data.msg);
			},
			error: function (data, status, e)
			{
				//alert(data);
				//alert(status);
				alert(status);
				alert(e);
			}
		}
	);
	
	return false;

}
</script>
</head>
<body>
	<img id="loading" src="${base }/javascripts/loading.gif" style="display:none;" />
	<form action="#" method="post" enctype="multipart/form-data" id="imgUpload">
	<table cellpadding="0" cellspacing="0" class="tableForm">

		<thead>
			<tr>
				<th>Please select a file and click Upload button</th>
			</tr>
		</thead>
		<tbody>	
			<tr>
				<td><input id="fileToUpload" type="file" size="45" name="file" class="input" /></td>			</tr>

		</tbody>
			<tfoot>
				<tr>
					<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
				</tr>
			</tfoot>
	
	</table>
	</form>
</body>
</html>